<template xlang="wxml">
	<view class="tki-tree">
		<view class="tki-tree-mask" :class="{'show':showTree}" 
			@tap="_cancel"></view>
		<view class="tki-tree-cnt" :class="{'show':showTree}">
			<view class="tki-tree-bar">
				<view class="tki-tree-bar-cancel" 
					:style="{'color':cancelColor}" 
					hover-class="hover-c" 
					@tap="_cancel">取消
				</view>
				<view class="tki-tree-bar-title" 
					:style="{'color':titleColor}">{{title}}
					</view>
				<view class="tki-tree-bar-confirm" 
					:style="{'color':confirmColor}" 
					hover-class="hover-c"
					@tap="_confirm">确定
				</view>
			</view>
			<view class="tki-tree-view">
				<view style="display: flex;flex-direction: column;overflow: hidden;height: 100%;">
					

					<view style="display: flex;overflow: hidden;height: 50%;">
						<scroll-view 
							class="tki-tree-view-sc" 
							style="flex:3;overflow: hidden;" 
							:scroll-y="true">
							<block v-for="(item, index) in PersosnpersonList" 
								:key="index">
								<view class="tki-tree-item" 
									:style="[{
												paddingLeft: item.rank*15 + 'px',
												zIndex: item.rank*-1 +50
											}]" :class="{
												personborder: personborder === true,
												show: true,
												last: item.lastRank,
												showchild: item.showChild,
												open: item.open,
											}">
									<view class="tki-tree-label" 
										@tap.stop="Person_treeItemTap(item, index)">
										<image class="tki-tree-icon"
											:src="item.lastRank ? personlastIcon : item.showChild ? personcurrentIcon : persondefaultIcon">
										</image>
										{{item.fFullName}}
									</view>
								</view>
							</block>
						</scroll-view>
						<scroll-view class="tki-tree-view-sc" style="flex:4;overflow: hidden;" :scroll-y="true">
							<!--:cd="personAll" -->
							<tki-trees @sonTate="state" :type="typeNum" :falgNum="falgNum" ref="tkitreeArr"
								personidKey="fUserid" :checked="checked" :personselectParent="PersosnselectParents"
								:personmultiple="Persosnmultiples" :personRange="PersosnpersonListArr"
								:personfoldAll="Persosnflods" personrangeKey="fRealname" @confirm="PersontreeConfirms"
								@cancel="PersontreeCancels">
							</tki-trees>
						</scroll-view>
					</view>
				</view>
				<view>

					<uni-tag v-for="(item,index) in personAll" :key="index" :text="item.fStaffName" :circle="true"
						:inverted="inverted" type="primary" style="text-align: center;margin: 10upx ;" />
				</view>
			</view>
			<!-- <view class="tki-tree-view" style="display: flex;">
				
				123
			
			</view> -->
		</view>
	</view>
</template>

<script>
	import personTree from '@/components/tree_020/tki-tree.vue';
	import tkiTrees from '@/components/cat-label/tki-tree.vue';
	import uniTag from '@/components/cat-label/uni-tag.vue';
	export default {
		name: "tki-tree",
		props: {
			// range: {
			// 	type: Array,
			// 	default: function() {
			// 		return []
			// 	}
			// },
			type: {
				type: String,
				default: 0,
			},
			falg: {
				type: String,
				default: 0,
			},
			personAlls: {
				type: Array,
				default: function() {
					return []
				}
			},
			idKey: {
				type: String,
				default: 'id'
			},
			rangeKey: {
				type: String,
				default: 'label'
			},
			title: {
				type: String,
				default: ''
			},
			multiple: { // 是否可以多选
				type: Boolean,
				default: false
				// default: true
			},
			selectParent: { //是否可以选父级
				type: Boolean,
				default: false
			},
			foldAll: { //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
				type: Boolean,
				default: false
			},
			confirmColor: { // 确定按钮颜色
				type: String,
				default: '' // #1752db
			},
			cancelColor: { // 取消按钮颜色
				type: String,
				default: '' // #757575
			},
			titleColor: { // 标题颜色
				type: String,
				default: '' // #1752db
			},
			currentIcon: { // 展开时候的ic
				type: String,
				default: ''
			},
			defaultIcon: { // 折叠时候的ic
				type: String,
				default: ''
			},
			lastIcon: { // 没有子集的ic
				type: String,
				default: ''
			},
			border: { // 是否有分割线
				type: Boolean,
				default: true
			},


			personRange: {
				type: Array,
				default: function() {
					return []
				}
			},
			personidKey: {
				type: String,
				default: 'id'
			},
			personrangeKey: {
				type: String,
				default: 'label'
			},
			persontitle: {
				type: String,
				default: ''
			},
			personmultiple: { // 是否可以多选
				type: Boolean,
				default: false
				// default: true
			},
			personselectParent: { //是否可以选父级
				type: Boolean,
				default: false
			},
			personfoldAll: { //折叠时关闭所有已经打开的子集，再次打开时需要一级一级打开
				type: Boolean,
				default: false
			},
			personconfirmColor: { // 确定按钮颜色
				type: String,
				default: '' // #1752db
			},
			personcancelColor: { // 取消按钮颜色
				type: String,
				default: '' // #757575
			},
			persontitleColor: { // 标题颜色
				type: String,
				default: '' // #1752db
			},
			personcurrentIcon: { // 展开时候的ic
				type: String,
				default: ''
			},
			persondefaultIcon: { // 折叠时候的ic
				type: String,
				default: ''
			},
			personlastIcon: { // 没有子集的ic
				type: String,
				default: ''
			},
			personborder: { // 是否有分割线
				type: Boolean,
				default: false
			},
			name: {
				type: String,
				default: ''
			},
			joggle: {
				type: Number,
				default: 0
			},
			keyId: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				inverted: false,
				showTree: false,
				treeList: [],
				selectIndex: -1,
				multiple1: true,
				selectParent1: true,
				flod1: true,
				personList: [],

				PersoshowTree: false,
				PersosnpersonList: [],
				PersosnselectIndex: -1,
				PersosnpersonListArr: [],
				Persosnmultiples: false,
				PersosnselectParents: true,
				Persosnflods: true,
				PersonselectPerson: [],
				personName: "",
				personAll: [],
				dataArr: [],
				deleteData: [],
				checked: [],
				falgNum: "0",
				typeNum: "0",
				userInfo: null,
				// companyId:this.keyId
				selectUser: {},
			}
		},
		computed: {},
		components: {
			personTree,
			tkiTrees,
			uniTag
		},

		methods: {
			getDAtas(arr) {
				this.PersosnpersonList = arr.childList
				console.log('arr', arr.childList);
			},
			setInverted(data) {

				this.personAll = this.personAll.filter((item, index) => {
					return item.fId != data.fId
				})

				// this.deleteData = this.personAll

			},
			say() {
				this.PersosnpersonListArr = []
			},
			state(a) {
				console.log('a',a);
				if (this.typeNum == 0) {
					this.personAll = a
				} else if (this.typeNum == 1) {
					var arr = this.PersonselectPerson.concat(a)

					var result = [];
					var obj = {};
					for (var i = 0; i < arr.length; i++) {
						if (!obj[arr[i].fId]) {
							result.push(arr[i]);
							obj[arr[i].fId] = true;
						}
					}
					this.personAll = result
					this.checked = this.personAll
				}



			},
			// 取消回调事件树形选择器
			treeCancel(e) {
				this.$refs.tkitree._hide()

			},
			// 确定回调事件
			treeConfirm(e) {

			},
			PersontreeConfirms(e) {
				console.log('eeeee',e);
			},
			PersontreeCancels(e) {
				console.log('PersontreeCancels',e);
			},
			// _show() {
			// 	this.PersoshowTree = true
			// },
			// _hide() {
			// 	this.PersoshowTree = false
			// },
			// _cancel() {
			// 	this._hide()
			// 	this.$emit("cancel", '');
			// },
			_confirm() {
				// 处理所选数据
				let rt = [],
					obj = {};
				this.PersosnpersonList.forEach((v, i) => {
					if (this.PersosnpersonList[i].checked) {
						obj = {}
						obj.parents = this.PersosnpersonList[i].parents
						obj = Object.assign(obj, this.PersosnpersonList[i].source)
						// 移除子元素
						delete obj.childList
						rt.push(obj)
					}
				})
				this._hide()
				// this.$emit("confirm", rt);
				this.$emit("confirm", this.personAll, this.typeNum);

			},
			//扁平化树结构
			Person_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {

				list.forEach(item => {
					this.PersosnpersonList.push({
						id: item[this.personidKey],
						name: item[this.personrangeKey],
						source: item,
						parentId, // 父级id数组
						parents, // 父级id数组
						rank, // 层级
						showChild: false, //子级是否显示
						open: false, //是否打开
						show: rank === 0, // 自身是否显示
						hideArr: [],
						orChecked: item.checked ? item.checked : false,
						checked: item.checked ? item.checked : false,
					})
					if (Array.isArray(item.childList) && item.childList.length > 0) {
						let parentid = [...parentId],
							parentArr = [...parents],
							childrenid = [...childrenid];
						delete parentArr.childList
						parentid.push(item[this.personidKey]);
						parentArr.push({
							[this.personidKey]: item[this.personidKey],
							[this.personrangeKey]: item[this.personrangeKey]
						})
						this.Person_renderTreeList(item.childList, rank + 1, parentid, parentArr);
					} else {
						this.PersosnpersonList[this.PersosnpersonList.length - 1].lastRank = true;
					}
				})
			},
			// 处理默认选择
			Person_defaultSelect() {
				this.PersosnpersonList.forEach((v, i) => {
					if (v.checked) {
						this.PersosnpersonList.forEach((v2, i2) => {
							if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
								v2.show = true
								if (v.parentId.includes(v2.id)) {
									v2.showChild = true;
									v2.open = true;
								}
							}
						})
					}
				})
			},
			// 点击
			Person_treeItemTap(item, index) {
				if (Array.isArray(this.personAll)) {
					this.checked = this.personAll
				}
				// this.checked = this.personAll
				// var cc=[1,2]
				this.PersosnpersonListArr = item.personList

				this.$refs.tkitreeArr._show();

				if (item.lastRank === true) {
					//点击最后一级时触发事件
					this.PersosnpersonList[index].checked = !this.PersosnpersonList[index].checked
					this.Person_fixMultiple(index)
					return;
				}
				return
				let list = this.PersosnpersonList;
				let id = item.id;
				item.showChild = !item.showChild;
				item.open = item.showChild ? true : !item.open;
				list.forEach((childItem, i) => {
					if (item.showChild === false) {
						//隐藏所有子级
						if (!childItem.parentId.includes(id)) {
							return;
						}
						if (!this.personfoldAll) {
							if (childItem.lastRank !== true && !childItem.open) {
								childItem.showChild = false;
							}
							// 为隐藏的内容添加一个标记
							if (childItem.show) {
								childItem.hideArr[item.rank] = id
							}
						} else {
							if (childItem.lastRank !== true) {
								childItem.showChild = false;
							}
						}
						childItem.show = false;
					} else {
						// 打开子集
						if (childItem.parentId[childItem.parentId.length - 1] === id) {
							childItem.show = true;
						}
						// 打开被隐藏的子集
						if (childItem.parentId.includes(id) && !this.personfoldAll) {
							if (childItem.hideArr[item.rank] === id) {
								childItem.show = true;
								if (childItem.open && childItem.showChild) {
									childItem.showChild = true
								} else {
									childItem.showChild = false
								}
								childItem.hideArr[item.rank] = null
							}
						}
					}
				})
			},
			// _treeItemSelect1(item, index) {
			// 	this.PersosnpersonList[index].checked = !this.PersosnpersonList[index].checked
			// 	this.Person_fixMultiple(index)
			// },
			// 处理单选多选
			Person_fixMultiple(index) {
				if (!this.personmultiple) {
					// 如果是单选
					this.PersosnpersonList.forEach((v, i) => {
						if (i != index) {
							this.PersosnpersonList[i].checked = false
						} else {
							this.PersosnpersonList[i].checked = true
						}
					})
				}
			},
			// 重置数据
			Person_reTreeList() {
				this.PersosnpersonList.forEach((v, i) => {
					this.PersosnpersonList[i].checked = v.orChecked
				})
			},
			Person_initTree(personRange = this.personRange) {
				this.PersosnpersonList = [];
				this.Person_renderTreeList(personRange);
				this.$nextTick(() => {
					this.Person_defaultSelect(personRange)
				})
			},





			_show() {
				this.showTree = true
			},
			_hide() {
				this.showTree = false
			},
			_cancel() {
				this._hide()
				this.$emit("cancel", '');
			},
			_confirm1() {
				// 处理所选数据
				let rt = [],
					obj = {};
				this.treeList.forEach((v, i) => {
					if (this.treeList[i].checked) {
						obj = {}
						obj.parents = this.treeList[i].parents
						obj = Object.assign(obj, this.treeList[i].source)
						// 移除子元素
						delete obj.children
						rt.push(obj)
					}
				})
				this._hide()
				this.$emit("confirm", rt);
			},
			//扁平化树结构
			_renderTreeList(list = [], rank = 0, parentId = [], parents = []) {

				list.forEach(item => {

					this.treeList.push({
						id: item[this.idKey],
						name: item[this.rangeKey],
						source: item,
						parentId, // 父级id数组
						parents, // 父级id数组
						rank, // 层级
						showChild: false, //子级是否显示
						open: false, //是否打开
						show: rank === 0, // 自身是否显示
						hideArr: [],
						orChecked: item.checked ? item.checked : false,
						checked: item.checked ? item.checked : false,
					})


					if (Array.isArray(item.children) && item.children.length > 0) {
						let parentid = [...parentId],
							parentArr = [...parents],
							childrenid = [...childrenid];
						delete parentArr.children
						parentid.push(item[this.idKey]);
						parentArr.push({
							[this.idKey]: item[this.idKey],
							[this.rangeKey]: item[this.rangeKey]
						})
						this._renderTreeList(item.children, rank + 1, parentid, parentArr);
					} else {
						this.treeList[this.treeList.length - 1].lastRank = true;
					}
				})

			},
			// 处理默认选择
			_defaultSelect() {
				this.treeList.forEach((v, i) => {
					if (v.checked) {
						this.treeList.forEach((v2, i2) => {
							if (v.parentId.toString().indexOf(v2.parentId.toString()) >= 0) {
								v2.show = true
								if (v.parentId.includes(v2.id)) {
									v2.showChild = true;
									v2.open = true;
								}
							}
						})
					}
				})

			},
			// // 点击
			// _treeItemTap(item, index) {
			// 	this.treeList[index].checked = !this.treeList[index].checked
			// 	this._fixMultiple(index)
			// 	this.getPerson(item.source.f_CompanyId)
			// 	this.PersosnpersonListArr = []

			// 	if (item.lastRank === true) {
			// 		//点击最后一级时触发事件
			// 		this.treeList[index].checked = !this.treeList[index].checked
			// 		this._fixMultiple(index)
			// 		return;
			// 	}
			// 	let list = this.treeList;
			// 	let id = item.id;
			// 	item.showChild = !item.showChild;
			// 	item.open = item.showChild ? true : !item.open;
			// 	list.forEach((childItem, i) => {
			// 		if (item.showChild === false) {
			// 			//隐藏所有子级
			// 			if (!childItem.parentId.includes(id)) {
			// 				return;
			// 			}
			// 			if (!this.foldAll) {
			// 				if (childItem.lastRank !== true && !childItem.open) {
			// 					childItem.showChild = false;
			// 				}
			// 				// 为隐藏的内容添加一个标记
			// 				if (childItem.show) {
			// 					childItem.hideArr[item.rank] = id
			// 				}
			// 			} else {
			// 				if (childItem.lastRank !== true) {
			// 					childItem.showChild = false;
			// 				}
			// 			}
			// 			childItem.show = false;
			// 		} else {
			// 			// 打开子集
			// 			if (childItem.parentId[childItem.parentId.length - 1] === id) {
			// 				childItem.show = true;
			// 			}
			// 			// 打开被隐藏的子集
			// 			if (childItem.parentId.includes(id) && !this.foldAll) {
			// 				if (childItem.hideArr[item.rank] === id) {
			// 					childItem.show = true;
			// 					if (childItem.open && childItem.showChild) {
			// 						childItem.showChild = true
			// 					} else {
			// 						childItem.showChild = false
			// 					}
			// 					childItem.hideArr[item.rank] = null
			// 				}
			// 			}
			// 		}
			// 	})


			// },
			
			// _treeItemSelect(item, index) {
			// 	this.treeList[index].checked = !this.treeList[index].checked
			// 	this._fixMultiple(index)
			// 	this.getPerson(item.source.f_CompanyId)
			// 	this.PersosnpersonListArr = []

			// },

			// 不合格报告传阅人
			getPerson(id) {
				var datas = {
					companyId: id,
					// userId: this.userInfo.userId,
				}

				var link;
				if (this.joggle == 0) {
					link = this.$http.getUserCompanyTreeLists; //在线沟通----涉及单位
				} else if (this.joggle == 1) {
					link = this.$http.getUserCompanyTreeListXm; //在线沟通----涉及项目
				}

				// link(that.totalData).then(res => {


				// hbPerson  rectifyPerson  joggle
				link(datas).then(res => {
					if (res.errcode == 0) {
						this.PersosnpersonList = []
						this.PersosnpersonList = res.data.userCompanyTreeList;
						console.log("this.PersosnpersonList", this.PersosnpersonList);
						this.Person_initTree(this.PersosnpersonList);
					}

				})
			},

			// 处理单选多选
			_fixMultiple(index) {
				if (!this.multiple) {
					// 如果是单选
					this.treeList.forEach((v, i) => {
						if (i != index) {
							this.treeList[i].checked = false
						} else {
							this.treeList[i].checked = true
						}
					})
				}
			},
			// 重置数据
			_reTreeList() {
				this.treeList.forEach((v, i) => {
					this.treeList[i].checked = v.orChecked
				})
			},
			_initTree(range = this.range) {
				this.treeList = [];
				this._renderTreeList(range);
				this.$nextTick(() => {
					this._defaultSelect(range)
				})
			}
		},
		watch: {
			// range(list) {
			// 	this._initTree(list);
			// },
			multiple() {
				if (this.range.length) {
					this._reTreeList();
				}
			},
			selectParent() {
				if (this.range.length) {
					this._reTreeList();
				}
			},
			personRange(list) {
				// this.Person_initTree(list);
			},
			personmultiple() {
				if (this.personRange.length) {
					this.Person_reTreeList();
				}
			},
			personselectParent() {
				if (this.personRange.length) {
					this.Person_reTreeList();
				}
			},
			personAlls(data) {
				this.dataArr = data
				this.personAll = data
			},
			name(a, b) {
				this.PersonselectPerson = []
				// this.newg = []
				// this.allArr = []
				this.PersosnpersonList = []
				this.PersosnpersonListArr = []
			},
			keyId: {
				handler(e) {
					this.getPerson(e)
				},
				immediate: true
			},
			PersosnpersonList: {
				handler(e) {

				},
				immediate: true
			},
			falg: {
				handler(e) {
					if (e != 0) {
						this.falgNum = e
						this.PersosnpersonList = []
						this.PersosnpersonListArr = []
						this.personAll = []
					}

				},
				immediate: true
			},
			type: {
				handler(e) {
					this.typeNum = e
					if (e == 0) {
						this.Persosnmultiples = false
					} else if (e == 1) {
						this.Persosnmultiples = true
					}
				},
				immediate: true
			}

		},
		mounted() {
			// this._initTree();

		}
	}
</script>

<style scoped>
	@import "@/components/cat-label/style.css";
</style>
